<template>
	<view class="title">
		<view 
			class="item" 
			:class="activeIndex === index ? 'active': ''" 
			v-for="(item, index) in title" 
			:key="index"
			@click="emit('changeActiveIndex', index)"
		>{{ item.title }}</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';
	defineProps(['title', "activeIndex"])
	
	const emit = defineEmits(['changeActiveIndex'])
</script>

<style lang="scss" scoped>
	.title {
		height: 80rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		align-items: center;

		.item {
			margin: 0 10rpx;

			&.active {
				color: red;
				border-bottom: 2px solid red;
			}
		}
	}
</style>